<section>
    <!--列表-->
    <div class="panel">
        <div class="panel-head">
            <strong><i class="el-icon-date"></i><span class="title">用户打款明细</span></strong>
        </div>
        <div class="body-content">
            <!-- 查询条件 -->
            <el-form :inline="true">
                <el-form-item>
                    <el-date-picker v-model="dataValue" type="daterange" range-separator="至" start-placeholder="开始日期"
                        end-placeholder="结束日期" value-format='yyyy-MM-dd' size='small'></el-date-picker>
                </el-form-item>
                <el-form-item>
                    <el-form-item>
                        <el-input size="small" v-model.trim="userName" placeholder="收款人姓名" clearable></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-input size="small" v-model.trim="mobile" placeholder="收款人注册手机号" clearable></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-select v-model="status" style="width:150px;" placeholder="请选择状态" size="small">
                            <el-option v-for="item in statusData" :key="item.code" :label="item.value" :value="item.code">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" size="small" @click='onSubmit'>搜索</el-button>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" size="small" @click='extractExcel'>导出</el-button>
                    </el-form-item>
                </el-form-item>
            </el-form>
            <!-- 微信打款，银行卡打款 -->
            <el-tabs v-model="type" type="card" @tab-click="tabClick">
                <el-tab-pane label="银行打款" name="0">
                    <!-- 数据列表 -->
                    <el-table border :data="tableData" v-loading="ListLoading" element-loading-text="拼命加载中"
                        cell-class-name="userpayCellClassName">
                        <el-table-column type="index" label="序号" width="70"></el-table-column>
                        <el-table-column property="name" label="收款人姓名"></el-table-column>
                        <el-table-column property="account" label="收款人账号" width="150"></el-table-column>
                        <el-table-column property="subTypeInfo" label="所属银行"></el-table-column>
                        <el-table-column property="mobile" label="绑卡手机号"></el-table-column>
                        <el-table-column property="amount" label="打款金额"></el-table-column>
                        <el-table-column property="statusInfo" label="目前状态"></el-table-column>
                        <el-table-column property="lastModifyTime" label="更新时间"></el-table-column>
                        <el-table-column label="状态变更" class-name="userpayClassName">
                            <template slot-scope="scope">
                                <el-radio v-model="scope.row.status" @change="radioChange(scope.row.autoId,$event)"
                                    label="1">待打款</el-radio>
                                <el-radio v-model="scope.row.status" @change="radioChange(scope.row.autoId,$event)"
                                    label="2">已打款</el-radio>
                                <el-radio v-model="scope.row.status" @change="radioChange(scope.row.autoId,$event)"
                                    label="3">打款失败</el-radio>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-tab-pane>
                <el-tab-pane label="微信打款" name="1">

                    <el-table border :data="tableData" v-loading="ListLoading" element-loading-text="拼命加载中" 
                    ref="multipleTable"
                    @selection-change="handleSelectionChange"
                    cell-class-name="userpayCellClassName">
                        <el-table-column type="selection" width="55">
                        </el-table-column>
                        <el-table-column type="index" label="序号" width="70"></el-table-column>
                        <el-table-column property="nickname" label="微信昵称"></el-table-column>
                        <el-table-column property="name" label="收款人姓名" width="150"></el-table-column>
                        <el-table-column property="mobile" label="手机号"></el-table-column>
                        <el-table-column property="sexDesc" label="性别"></el-table-column>
                        <el-table-column property="city" label="所在城市"></el-table-column>
                        <el-table-column property="amount" label="打款金额"></el-table-column>
                        <el-table-column property="lastModifyTime" label="更新时间"></el-table-column>
                        <el-table-column 
                            sortable
                            property="statusInfo" 
                            width="120"
                            label="目前状态"></el-table-column>
                        <el-table-column property="remark" label="备注"></el-table-column>
                    </el-table>
                    <br>
                    <el-button type="info" plain @click="wxreturn">撤销</el-button>
                    <el-button type="warning" plain @click="wxpaySure">打款</el-button>
                </el-tab-pane>
            </el-tabs>


            <!-- 分页 -->
            <div class="paginationMargin">
                <el-pagination layout="prev, pager, next" background :current-page='currentPage' :page-count='pageCount'
                    @current-change="handleCurrentChange">
                </el-pagination>
            </div>
        </div>
        <!-- 撤销确认弹窗 -->
        <el-dialog :title="pachActionType == 'wxreturnSure' ? '确认撤销' : '确认打款?'" 
            center
            :visible.sync="dialogVisible" width="30%">
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="sureAction">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</section>